.content {
  width: 100%;
  background-color: var(--bg-second);
  overflow: hidden;
}

.ArticleItem {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  padding-top: 5px;
  margin-left: 10px;

  .top {
    display: flex;
    align-items: center;

    h2 {
      padding-top: 8px;
      color: var(--fc);
    }

    span {
      color: var(--fc);
      margin-left: 10px;
    }
  }

  dl {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 12px;

    dt {
      position: relative;
      flex: 0 0 auto;
      width: 190px;
      max-height: 150px;
      min-height: 100px;
      // border-radius: var(--border-radius);
      margin-right: 1rem;
      overflow: hidden;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        // height: 100%;
        width: 100%;
        transform: translate3d(-50%, -50%, 0);
        object-fit: cover;
      }
    }

    dd {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p:nth-child(1) {
        display: -webkit-box;
        max-width: 100%;
        color: #000;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: var(--fc);
      }

     div {
        width: 100%;
        color: #8590a6;
        font-size: 14px;
        line-height: 20px;
        margin-top: .8rem;

        span {
          display: inline-block;
          color: inherit;
          font-style: normal;
          line-height: 0;
          text-align: center;
          text-transform: none;
          vertical-align: -.125em;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
        }

        p {
          display: inline-block;
          margin: 0 8px;
        }
      }
    }
  }
}

.ArticleItem:hover {
  cursor: pointer;

  .top>h2 {
    color: #ff0064;

  }

}
